<template>
	<div class="basic_wrap">
		<bsHeader :title="type == 1 ? '修改登录密码':'修改支付密码'" @backurl="$router.back()"></bsHeader>
    <div class="content">
      <div class="item">
        <input type="text" placeholder="请输入原密码" v-model="password">
        <div style="margin-bottom: 10px;color: red"
        v-if="type == 2"
        >*如未设置过支付密码，请使用登录密码</div>
      </div>
      <div class="item">
        <input type="text" placeholder="请输入修改密码" v-model="new_password">
      </div>
      <div class="item">
        <input type="text" placeholder="请输入确认密码" v-model="new_password_base">
      </div>
    </div>
    <div class="btnWrap">
      <div class="btn" @click="toSure">
        确认
      </div>
    </div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import bsHeader from '../../components/bsHeader.vue'
	import Fetch from '../../utils/fetch'
	export default {
		name: "passwordManage",
		components: {
			bsHeader
		},
		data() {
			return {
        type:1,
        password:'',
        new_password:'',
        new_password_base:''
			};
		},
		created() {
			if (window.plus) {
				plus.navigator.setStatusBarBackground('#FFFFFF');
				plus.navigator.setStatusBarStyle('dark');
			}
			this.$parent.footer('user', false);
		},
		mounted() {
      this.$nextTick(()=>{
        this.type = this.$route.query.type
      })
    },
    methods:{
      toSure(){
        if(!this.password){
          this.$toast('请输入原始密码');
          return
        }
        if(!this.new_password || !this.new_password_base){
          this.$toast('请输入密码');
          return
        }
        if(this.new_password != this.new_password_base){
          this.$toast('输入密码不一致');
          return
        }
        let params = {
          password:this.password,
          new_password:this.new_password
        }
         if(this.type == 1){
           Fetch('/user/updatePassword',params).then((r) => {
             this.$toast('操作成功');
           });
         }else {
           Fetch('/user/updatePayPassword',params).then((r) => {
             this.$toast('操作成功');
           });
         }
      },
    },
	};
</script>

<style lang="less" scoped>
	.basic_wrap {
		position: relative;
		padding-bottom: 100px;
    box-sizing: border-box;
    min-height: 100vh;
    background: #ffffff;
    .content{
      display: flex;
      flex-direction: column;
      padding-top: 140px;
      .item{
        margin: 0 20px;
        input{
          background: #F2F2F2;
          margin-bottom: 10px;
          width: 100%;
          height: 44px;
          padding: 0 20px;
          border-radius: 8px;
        }
      }
    }
    .btnWrap{
      margin-top: 60px;
      display: flex;
      justify-content: center;
      .btn{
        width: 45vw;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(0deg, #018DFF 0%, #0038FF 100%);
        color: #ffffff;
      }
    }
	}
</style>
